<template>
    <div>
        <div class="d-flex jc-center">
            <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
            <div class="d-flex jc-center">
                <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;"/>
                <div class="title" @click="toIndex" style="cursor: pointer;">
                    <span class="title-text">{{ titleName.title1 }}</span>
                    <dv-decoration-6 class="title-bototm"
                                     :reverse="true"
                                     :color="['#50e3c2', '#67a1e5']"
                                     style="width:3.125rem;height:.1rem;"/>
                </div>
                <dv-decoration-8 :reverse="true"
                                 :color="['#568aea', '#000000']"
                                 style="width:2.5rem;height:.625rem;"/>
            </div>
            <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
            <div class="d-flex" style="width: 40%">
                <div class="react-right ml-4"
                     style="width: 6.25rem; text-align: left;background-color: #0f1325;">
                    <span class="react-before"></span>
                    <span class="text">{{ dateYear }} {{ dateWeek }}</span>
                </div>
                <div class="react-right bg-color-blue ml-3">
                    <span class="text fw-b">{{ titleName.title2 }}</span>
                </div>
            </div>
            <div style="width: 40%" class="d-flex">
                <div class="react-left mr-3" style="background-color: #0f1325;">
                    <span class="text colorBlue">{{ titleName.title3 }}</span>
                </div>
                <div class="react-left mr-4"
                     style="width: 6.25rem; background-color: #0f1325; text-align: right;">
                    <span class="react-after"></span>
                    <span v-if="enableRefresh"
                          class="text refresh el-icon-refresh"
                          @click.stop="reloadView"></span>
                    <span class="text"> {{ dateDay }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            enableRefresh: false,
        };
    },
    props: {
        titleName: {
            type: Object,
            required: true,
            default: () => ({
                title1: 'title1',
                title2: 'title2',
                title3: 'title3',
            })
        }
    },
    components: {},
    mounted() {
        this.timeFn();
    },
    methods: {
        timeFn() {
            setInterval(() => {
                this.dateDay = this.selfUtils.formatTime(new Date(), 'HH: mm: ss');
                this.dateYear = this.selfUtils.formatTime(new Date(), 'yyyy-MM-dd');
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000)
            this.$nextTick(() => {
                setTimeout(() => {
                    this.enableRefresh = true;
                }, 2000);
            });
        },
        toIndex() {
            this.selfUtils.goRouter(this, 'index', 'replace', {});
        },
        reloadView() {
            location.reload();
        },
    }
};
</script>

<style lang="scss">
</style>